
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>图片预览 · Diboot移动端基础项目</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs-2/vue.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="关联数据列表选择.html" />
    
    
    <link rel="prev" href="图片上传.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                



<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    介绍
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../开始.html">
            
                <a href="../开始.html">
            
                    
                    开始
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../开始/环境准备.html">
            
                <a href="../开始/环境准备.html">
            
                    
                    环境准备
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../开始/下载项目.html">
            
                <a href="../开始/下载项目.html">
            
                    
                    下载项目
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../开始/项目配置.html">
            
                <a href="../开始/项目配置.html">
            
                    
                    项目配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../开始/启动项目.html">
            
                <a href="../开始/启动项目.html">
            
                    
                    启动项目
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../基础.html">
            
                <a href="../基础.html">
            
                    
                    基础
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../基础/路由.html">
            
                <a href="../基础/路由.html">
            
                    
                    路由
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../基础/过滤器.html">
            
                <a href="../基础/过滤器.html">
            
                    
                    过滤器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../基础/表单验证.html">
            
                <a href="../基础/表单验证.html">
            
                    
                    表单验证
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../基础/接口数据格式.html">
            
                <a href="../基础/接口数据格式.html">
            
                    
                    接口数据格式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../基础/页面样式管理.html">
            
                <a href="../基础/页面样式管理.html">
            
                    
                    页面样式管理
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../基础/展示列表数据.html">
            
                <a href="../基础/展示列表数据.html">
            
                    
                    展示列表数据
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.7" data-path="../基础/展示详情数据.html">
            
                <a href="../基础/展示详情数据.html">
            
                    
                    展示详情数据
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.8" data-path="../基础/添加新数据.html">
            
                <a href="../基础/添加新数据.html">
            
                    
                    添加新数据
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.9" data-path="../基础/更新数据.html">
            
                <a href="../基础/更新数据.html">
            
                    
                    更新数据
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../组件.html">
            
                <a href="../组件.html">
            
                    
                    组件
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="图片上传.html">
            
                <a href="图片上传.html">
            
                    
                    图片上传
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.4.2" data-path="图片预览.html">
            
                <a href="图片预览.html">
            
                    
                    图片预览
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="关联数据列表选择.html">
            
                <a href="关联数据列表选择.html">
            
                    
                    关联数据列表选择
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="列表分页组件.html">
            
                <a href="列表分页组件.html">
            
                    
                    列表分页组件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>



                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                

                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >图片预览</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><li><span class="title-icon "></span><a href="#&#x56FE;&#x7247;&#x9884;&#x89C8;"><b>1. </b>&#x56FE;&#x7247;&#x9884;&#x89C8;</a></li><ul><li><span class="title-icon "></span><a href="#&#x5F15;&#x5165;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;"><b>1.1. </b>&#x5F15;&#x5165;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;</a></li></ul></ul></div><a href="#&#x56FE;&#x7247;&#x9884;&#x89C8;" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h1 id="&#x56FE;&#x7247;&#x9884;&#x89C8;"><a name="&#x56FE;&#x7247;&#x9884;&#x89C8;" class="anchor-navigation-ex-anchor" href="#&#x56FE;&#x7247;&#x9884;&#x89C8;"><i class="fa fa-link" aria-hidden="true"></i></a>1. &#x56FE;&#x7247;&#x9884;&#x89C8;</h1>
<p><a href="">src/components/common/image</a> &#x6587;&#x4EF6;&#x5939;&#x4E0B;&#x63D0;&#x4F9B;&#x4E86;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;<a href="">imageView.vue</a>&#x3002;&#x6309;&#x7167;&#x672C;&#x6587;&#x6863;&#x7684;&#x65B9;&#x6CD5;&#x5F15;&#x7528;&#xFF0C;&#x53EF;&#x5BF9;&#x56FE;&#x7247;&#x8FDB;&#x884C;&#x5F39;&#x5C42;&#x9884;&#x89C8;&#x3002;</p>
<h2 id="&#x5F15;&#x5165;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;"><a name="&#x5F15;&#x5165;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#&#x5F15;&#x5165;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1. &#x5F15;&#x5165;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x7EC4;&#x4EF6;</h2>
<ul>
<li>&#x5728;<a href="">script</a>&#x6807;&#x7B7E;&#x4E2D;&#x5F15;&#x5165;<a href="">imageView.vue</a>&#x7EC4;&#x4EF6;&#xFF0C;&#x5E76;&#x5728;<a href="">components</a>&#x5C5E;&#x6027;&#x4E2D;&#x6DFB;&#x52A0;&#x8BE5;&#x7EC4;&#x4EF6;&#xFF0C;&#x4EE5;&#x53CA;&#x5F15;&#x5165;detail.js&#x7684;mixins&#xFF0C;&#x5982;&#x4E0B;&#xFF1A;</li>
</ul>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> detail <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@/components/mixins/detail&apos;</span>;
<span class="hljs-keyword">import</span> imageView <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@/components/common/image/imageView&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  name: <span class="hljs-string">&apos;studentDetail&apos;</span>,
  data() {
    <span class="hljs-keyword">return</span> {
      name: <span class="hljs-string">&apos;student&apos;</span>,
      attachMore: <span class="hljs-literal">true</span>,
    };
  },
  mixins: [detail],
  components: {
    <span class="hljs-string">&apos;image-view&apos;</span>: imageView,
  },
};
</code></pre>
<ul>
<li>&#x5728;template&#x6807;&#x7B7E;&#x5185;&#xFF0C;&#x589E;&#x52A0;<a href="">image-view</a>&#x6807;&#x7B7E;&#xFF0C;&#x5982;&#x4E0B;&#xFF1A;</li>
</ul>
<pre><code>&lt;template&gt;
    &lt;div class=&quot;studentDetail&quot;&gt;
        &lt;mt-cell title=&quot;&#x59D3;&#x540D;&quot;&gt;{{ model.name | formatNull }}&lt;/mt-cell&gt;
        &lt;mt-cell v-if=&quot;model.avatar&quot; title=&quot;&#x5934;&#x50CF;&quot;&gt;
            &lt;div class=&quot;cell-image-box&quot; :style=&quot;&apos;width:&apos; + rightWidth + &apos;px;&apos;&quot;&gt;
                &lt;img @click=&quot;showImage(img)&quot; v-for=&quot;(img, index) in model.avatarList&quot; :key=&quot;img + index&quot; :src=&quot;img&quot;&gt;
            &lt;/div&gt;
        &lt;/mt-cell&gt;
        &lt;image-view v-if=&quot;imageUrl&quot; :imageUrl=&quot;imageUrl&quot; @closePanel=&quot;imageUrl=&apos;&apos;&quot;&gt;&lt;/image-view&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre><ul>
<li>&#x5728;&#x5C0F;&#x56FE;&#x4E2D;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;&#x4F1A;&#x8C03;&#x7528;detail&#x7684;mixins&#x7684;<a href="">showImage(img)</a>&#x65B9;&#x6CD5;&#xFF0C;&#x6539;&#x65B9;&#x6CD5;&#x4F1A;&#x663E;&#x793A;&#x51FA;<a href="">image-view</a>&#x7684;&#x56FE;&#x7247;&#x9884;&#x89C8;&#x6548;&#x679C;&#xFF0C;showImage(img)&#x65B9;&#x6CD5;&#x5982;&#x4E0B;&#xFF1A;</li>
</ul>
<pre><code class="lang-javascript">showImage(imgurl) {
    <span class="hljs-keyword">this</span>.imageUrl = imgurl;
}
</code></pre>
<ul>
<li>&#x56FE;&#x7247;&#x9884;&#x89C8;&#x5F39;&#x5C42;&#x663E;&#x793A;&#x4E0E;&#x5426;&#x6839;&#x636E;this.imageUrl&#x662F;&#x5426;&#x4E3A;&#x7A7A;&#x5224;&#x65AD;&#x3002;</li>
</ul>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                

            </div>

            
                
                <a href="图片上传.html" class="navigation navigation-prev " aria-label="Previous page: 图片上传">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="关联数据列表选择.html" class="navigation navigation-next " aria-label="Next page: 关联数据列表选择">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"图片预览","level":"1.4.2","depth":2,"next":{"title":"关联数据列表选择","level":"1.4.3","depth":2,"path":"组件/关联数据列表选择.md","ref":"组件/关联数据列表选择.md","articles":[]},"previous":{"title":"图片上传","level":"1.4.1","depth":2,"path":"组件/图片上传.md","ref":"组件/图片上传.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-sharing","sharing-plus","anchor-navigation-ex","theme-vuejs-2"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search":{},"sharing-plus":{"qq":false,"all":["facebook","google","twitter","instapaper","linkedin","pocket","stumbleupon"],"douban":false,"facebook":true,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":true,"messenger":false,"line":false,"vk":false,"pocket":true,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"theme-vuejs-2":{},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"anchor-navigation-ex":{"mode":"float","pageTop":{"level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"showLevel":true,"tocLevel1Icon":"fa fa-hand-o-right","tocLevel2Icon":"fa fa-hand-o-right","tocLevel3Icon":"fa fa-hand-o-right","showGoTop":true,"isShowTocTitleIcon":true,"printLog":false,"multipleH1":true,"associatedWithSummary":true,"float":{"floatIcon":"fa fa-navicon","level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false}},"sharing":{"qq":true,"all":["weibo","qq","linkedin","qzone","douban"],"douban":false,"weibo":true,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":false,"messenger":false,"line":false,"vk":false,"pocket":false,"viber":false,"stumbleupon":false,"qzone":true,"linkedin":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Diboot移动端基础项目","gitbook":"*","description":"Diboot移动端基础项目"},"file":{"path":"组件/图片预览.md","mtime":"2018-11-08T08:51:40.897Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-10T15:10:03.285Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

